<template>
  <div class="default">

    <div class="historySearch">
      <div class="title">
        <h3>我的历史搜索</h3>
        <p @click="clearSearch">清除全部搜索</p>
      </div>
      <ul>
        <li
          v-for="(item, index) in hisList"
          :key="index"
          v-logopress="deleteAddress"
          @click="jump(item)"
        >
          <p >{{ item }}</p>
        </li>
      </ul>
    </div>

    <div class="hotSearch"></div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, reactive,watch ,defineEmits,defineProps} from "vue"
import { Dialog ,Toast} from 'vant';
import { getData } from "../../../utils/request.js";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const store = useStore();
let hisList = ref([]);
const show = ref(false);
let timeOutEvent = "";
const emits=defineEmits(['demo'])
watch([()=>store.state.search.searchHistory], (oldData, newData)=>{
                    hisList.value = store.state.search.searchHistory;
                },{immediate:true,deep:true})
const deleteAddress = (e) => {
   let list=store.state.search.searchHistory
   let index=list.findIndex((item) => item == e.children[0].innerHTML);
  Dialog.confirm({
  title: '删除地址',
  message:
    '是否要删除该条搜索记录?',
})
  .then(() => {

     store.commit("search/delteSearch",index)
  })
  .catch(() => {
    // on cancel
  });
  
};
const jump=(item)=>{
  emits("demo",item)
}

// const getsearch=async(value)=>{
//   Toast.loading({
//     message: "正在请求数据，请稍后...",
//     forbidClick: true,
//     duration: 0,
//   });
//      let result= await search(value)
//       if(result){
//         Toast.clear();
//          console.log(2222);
//        store.commit("search/setResultList",result)
//        console.log(store.state.search.resultList);
//         router.push('/search/searchResult')
//       }
// }
// const search = async (e) => {
//   let result;
//   const data = {
//     project_id: 234,
//     name: e,
//   };
//   console.log(data);
//   if (data.name) {
//     try {
//       result = await getData(`/goodsSearch`, data);

//     } catch (error) {}
//     if (result.status == 200) {
//       // searchList.value = result.data.result.rows;
    
//       let data = result.data.result.rows;
//       return data
//     }
//   }
// };


const clearSearch = () => {
  store.commit("search/clearSearch");
  hisList.value=[]
};



</script>

<style lang="scss" scoped>
.historySearch {
  width: 100%;
  margin-top: 1.89vh;
  .title {
    width: 90vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 1.89vh;
    p,
    h3 {
      margin: 0;
      color: #333333;
    }
    h3 {
      font-size: 4.26vw;
    }
    p {
      font-size: 3.26vw;
    }
  }
  ul {
    width: 90vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    li {
      margin-left: 2.66vw;
      font-size: 3.73vw;
      color: #666666;
      background-color: #f5f5f5;
      margin-top: 1vh;
      p {
        margin: 0.79vh 2.66vw;
      }
    }
  }
  // ul > li:nth-of-type(1) {
  //   margin-left: 0;
  // }
}
</style>
